<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-btns">
      <button
        *ngIf="permission.userPermission.has('stock:sockCommodityBrand:add')"
        nz-button
        nzType="primary"
        (click)="editItem(0)">
        添加品牌
      </button>
    </div>

    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">品牌名称</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入品牌名称" [(ngModel)]="seachForms.name" />
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button
            nz-button
            nzType="primary"
            class="m-r-8"
            [nzLoading]="tableForms.tableLoading"
            (click)="searchData()">
            查询
          </button>
          <button
            nz-button
            nzType="default"
            (click)="resetData()">
            重置
          </button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
  <!-- Table -->
  <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableForms.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableForms.total"
        [nzPageIndex]="tableForms.page"
        [nzPageSize]="tableForms.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="100px">ID</th>
            <th nzAlign="center">品牌名称</th>
            <th nzAlign="center">外文名</th>
            <th nzAlign="center">编码</th>
            <th nzAlign="center">排序</th>
            <th nzAlign="center">前端展示</th>
            <th nzAlign="center">状态</th>
            <th nzAlign="center">操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td nzAlign="center">{{ data.id || '-' }}</td>
            <td nzAlign="center">{{ data.name || '-' }}</td>
            <td nzAlign="center">{{ data.nameEn || '-' }}</td>
            <td nzAlign="center">{{ data.code || '-' }}</td>
            <td nzAlign="center">{{ data.sort || '-' }}</td>
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.isHide == 0 ? '#008000' : '#f00000'}">
                {{ data.isHide == 0 ? '展示' : data.isHide == 1 ? '不展示' : '-' }}
              </span>
            </td>
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.state == 1 ? '#008000' : '#f00000'}">
                {{ data.state == 0 ? '禁用' : data.state == 1 ? '启用' : '-' }}
              </span>
            </td>
            <td nzAlign="center">
              <button *ngIf="data.status != 3&&permission.userPermission.has('stock:sockCommodityBrand:edit')" nz-button nzType="link" (click)="editItem(1, data)">编辑</button>
              <a
                *ngIf="data.status != 3&&permission.userPermission.has('stock:sockCommodityBrand:delete')"
                nz-button
                nz-button-tdlink
                nzType="link"
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确认删除吗?"
                [nzIcon]="iconTpl"
                (nzOnConfirm)="deleteConfirm(data.id)">
                删除
              </a>
              <ng-template #iconTpl>
                  <i nz-icon nzType="question-circle-o" style="color: red;"></i>
              </ng-template>
            </td>
          </tr>
        </tbody>
      </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
  </div>
</nz-card>

<!-- model START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="500"
  [(nzVisible)]="isVisible"
  nzTitle="分类信息"
  (nzOnCancel)="handleCancel()"
  (nzAfterClose)="closeModel($event)">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateForm">
        <!-- 名称 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzRequired
            nzFor="name"
            class="label-sp">
            名称
          </nz-form-label>
          <nz-form-control
            [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="请输入名称">
            <input
              nz-input
              formControlName="name"
              id="name"
              placeholder="请输入名称"
            />
          </nz-form-control>
        </nz-form-item>

        <!-- 编码 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzRequired
            nzFor="code"
            class="label-sp">
            编码
          </nz-form-label>
          <nz-form-control
            [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="请输入编码">
            <input
              nz-input
              formControlName="code"
              id="code"
              placeholder="请输入编码"
            />
          </nz-form-control>
        </nz-form-item>

        <!-- 排序 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzRequired
            nzFor="sort"
            class="label-sp">
            排序
          </nz-form-label>
          <nz-form-control
            [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="请输入排序">
            <input
              nz-input
              formControlName="sort"
              id="sort"
              placeholder="请输入排序"
            />
          </nz-form-control>
        </nz-form-item>

        <!-- 外文名称 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzFor="nameEn"
            class="label-sp">
            外文名称
          </nz-form-label>
          <nz-form-control
            [nzSm]="14"
            [nzXs]="24">
            <input
              nz-input
              formControlName="nameEn"
              id="nameEn"
              placeholder="请输入外文名称"
            />
          </nz-form-control>
        </nz-form-item>

        <!-- 前端展示 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzRequired
            nzFor="isHide"
            class="label-sp">
            前端展示
          </nz-form-label>

          <nz-form-control
            [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="请选择前端展示">
            <nz-radio-group
              formControlName="isHide"
              id="isHide">
              <label nz-radio nzValue="0">展示</label>
              <label nz-radio nzValue="1">不展示</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <!-- 状态 -->
        <nz-form-item>
          <nz-form-label
            [nzSm]="6"
            [nzXs]="24"
            nzFor="state"
            nzRequired
            class="label-sp">
            状态
          </nz-form-label>

          <nz-form-control
            [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="请选择状态">
            <nz-radio-group
              formControlName="state"
              id="state">
              <label nz-radio nzValue="1">启用</label>
              <label nz-radio nzValue="0">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" (click)="handleOk()">确认</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- model END -->
